<template>
  <mt-navbar title="发布线索"> </mt-navbar>
  <view class="safety-150">
    <view class="forms">
      <uv-form ref="formRef" label-position="left" label-width="200rpx" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="bg-#ffffff my-16rpx no-border">
          <uv-form-item label="线索类型：" prop="productId" required>
            <view class="flex-1 min-w-0 line-height-48rpx min-h-48rpx mr-24rpx px-20rpx" @click="goSearchProduct">
              <text v-if="modelForm.productId" class="text-28rpx text-#1A1A1A"
                >{{ modelForm.productCategoryName[0] }} / {{ modelForm.productName }}</text
              >
              <text v-else class="text-28rpx text-#c0c4cc">请选择线索类型</text>
            </view>
            <uv-icon name="arrow-right" color="#1C213E" size="28rpx" @click="goSearchProduct"></uv-icon>
          </uv-form-item>
        </view>

        <view class="bg-#ffffff">
          <uv-form-item label="联系人名称：" prop="contactsName" required>
            <uv-input v-model="modelForm.contactsName" maxlength="10" placeholder="请输入联系人名称" border="none" clearable></uv-input>
          </uv-form-item>
          <uv-form-item label="联系方式：" prop="contactsPhone" required>
            <uv-input v-model="modelForm.contactsPhone" maxlength="11" placeholder="请输入联系人手机号" border="none" clearable></uv-input>
          </uv-form-item>
          <!-- <uv-form-item label="职位：" prop="duty" required>
            <uv-input v-model="modelForm.duty" maxlength="10" placeholder="请输入联系人职位" border="none" clearable></uv-input>
          </uv-form-item> -->
          <!-- <uv-form-item label="地区：" prop="city" required>
            <view class="flex-1 min-w-0 line-height-48rpx h-48rpx mr-24rpx px-20rpx" @click="goSearchAddress">
              <text v-if="modelForm.city" class="text-28rpx text-#1A1A1A">{{ modelForm.province }} / {{ modelForm.city }}</text>
              <text v-else class="text-28rpx text-#c0c4cc">请选择地区</text>
            </view>
            <uv-icon name="arrow-right" color="#1C213E" size="28rpx" @click="goSearchAddress"></uv-icon>
          </uv-form-item> -->
          <!-- <uv-form-item label="公司名称：" prop="companyName">
            <uv-input v-model="modelForm.companyName" maxlength="20" placeholder="请输入联系人公司" border="none" clearable></uv-input>
          </uv-form-item> -->
          <!-- <uv-form-item label="公司地址：" prop="companyAddress" required>
            <uv-input v-model="modelForm.companyAddress" maxlength="20" placeholder="请输入公司地址" border="none" clearable></uv-input>
          </uv-form-item> -->
          <view class="flex mx-32rpx py-30rpx">
            <view class="w-200rpx text-28rpx text-#727687">描述：</view>
            <view class="flex-1 min-w-0">
              <uv-textarea v-model="modelForm.remark" maxlength="200" placeholder="请输入描述" border="none" auto-height></uv-textarea>
            </view>
          </view>
        </view>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="w-full" @click="handleSubmit">确定</mt-button>
    </view>

    <mt-modal ref="modalRef"></mt-modal>
  </view>
</template>

<script setup>
import { cluerelease } from '@/subClue/api/index';
import { phoneCheck } from '@/utils/regular';
import userStore from '@/store/user';

const user = userStore();

const formRef = ref();
const modelForm = ref({
  productCategoryId: [],
  productCategoryName: [],
  productId: '',
  productName: '',
  contactsName: '',
  contactsPhone: '',
  duty: '',
  companyName: '',
  companyAddress: '',
  provinceCode: '',
  province: '',
  cityCode: '',
  city: '',
  remark: ''
});
const rules = {
  productId: {
    type: 'string',
    required: true,
    message: '请选择线索类型',
    trigger: ['change']
  },
  contactsName: {
    type: 'string',
    required: true,
    message: '请输入联系人名称',
    trigger: ['blur']
  },
  contactsPhone: [
    {
      type: 'string',
      required: true,
      message: '请输入联系人手机号',
      trigger: ['blur']
    },
    {
      validator: (rule, value, callback) => {
        return phoneCheck(value);
      },
      message: '请输入正确的手机号',
      trigger: ['blur']
    }
  ]
  // duty: {
  //   type: 'string',
  //   required: true,
  //   message: '请输入联系人职位',
  //   trigger: ['blur']
  // },
  // city: {
  //   type: 'string',
  //   required: true,
  //   message: '请选择地区',
  //   trigger: ['change']
  // },
  // companyAddress: {
  //   type: 'string',
  //   required: true,
  //   message: '请输入公司地址',
  //   trigger: ['blur']
  // }
};

function goSearchProduct() {
  uni.setStorageSync('searchProduct', {
    productCategoryId: modelForm.value.productCategoryId,
    productCategoryName: modelForm.value.productCategoryName,
    productId: modelForm.value.productId,
    productName: modelForm.value.productName
  });

  uni.navigateTo({
    url: '/subClue/pages/searchProduct1'
  });
}

function goSearchAddress() {
  uni.setStorageSync('selectCity', {
    provinceCode: modelForm.value.provinceCode,
    province: modelForm.value.province,
    cityCode: modelForm.value.cityCode,
    city: modelForm.value.city
  });
  uni.navigateTo({
    url: '/pages/common/selectCity'
  });
}

const modalRef = ref();
function openModal() {
  modalRef.value.open({
    title: '温馨提示',
    content: '请完善地址信息，否则无法发布线索',
    contentAlign: 'center',
    confirmText: '去完善',
    success: (e) => {
      if (e.confirm) {
        uni.navigateTo({
          url: '/pages/index/personal'
        });
      }
    }
  });
}

function handleSubmit() {
  if (user.userInfo.registerZone < 1) {
    openModal();
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      cluerelease(modelForm.value).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    })
    .catch((err) => {});
}

onShow(() => {
  const p_storage = uni.getStorageSync('searchProduct');
  const c_storage = uni.getStorageSync('selectCity');
  if (p_storage) {
    modelForm.value.productCategoryId = p_storage.productCategoryId;
    modelForm.value.productCategoryName = p_storage.productCategoryName;
    modelForm.value.productId = p_storage.productId;
    modelForm.value.productName = p_storage.productName;
  }
  if (c_storage) {
    modelForm.value.provinceCode = c_storage.provinceCode;
    modelForm.value.province = c_storage.province;
    modelForm.value.cityCode = c_storage.cityCode;
    modelForm.value.city = c_storage.city;
  }
});
onUnload(() => {
  uni.removeStorage({
    key: 'searchProduct'
  });
  uni.removeStorage({
    key: 'selectCity'
  });
});
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-input) {
    height: 50rpx;
    padding: 0 12rpx !important;
  }
  :deep(.uv-textarea) {
    padding: 0 12rpx !important;
    .uni-textarea-wrapper {
      min-height: 100rpx;
    }
  }
  :deep(.uv-form) {
    .no-border {
      .uv-form-item {
        border-bottom: none;
      }
    }
    .uv-form-item {
      font-size: 28rpx;
      margin: 0 32rpx;
      border-bottom: 2rpx solid #e4e4e4;
      .uv-form-item__body {
        padding: 30rpx 0;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
